<template>
  <el-row :gutter="20">
    <el-col :span="10">
      <div class="grid-content bg-purple">
        <el-card :body-style="{ padding: '10px' }">
          <div style="padding: 14px">
            <span class="demonstration">选项</span>
          </div>
          <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="Matrix 1: ">
              <el-input type="textarea" :rows="5" v-model="m1">
              </el-input>
            </el-form-item>

            <el-form-item label="Matrix 2: ">
              <el-input type="textarea" :rows="5" v-model="m2">
              </el-input>
            </el-form-item>

            <el-form-item label="提交">
              <el-button
                style="margin-left: 10px"
                size="small"
                type="primary"
                @click="submitUpload"
                >上传</el-button
              >
            </el-form-item>
          </el-form>
        </el-card>
      </div>
    </el-col>

    <el-col :span="10">
      <div class="grid-content bg-purple" v-loading="loading">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>扫描结果</span>
          </div>
          <div class="clearfix">
            <el-input type="textarea" :autosize="true" v-model="result">
            </el-input>
          </div>
        </el-card>
      </div>
    </el-col>
  </el-row>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      m1: '1 2 3\n4 5 6\n7 8 9',
      m2: '1 2 3\n4 5 6\n7 8 9',
      result: '1 2 3\n4 5 6\n7 8 9'
    };
  },
  methods: {
    submitUpload() {
      this.$axios({
      url: "http://127.0.0.1:5000/api/math/matrix",
      method: "post",
      data: JSON.stringify({
        m1: this.m1.trim(),
        m2: this.m2.trim()
      }),
      headers: {
        "Content-Type": "application/json",
      },
    }).then((response) => {
      this.result = response.data.result
      console.log(this.m1);
    });
    },
  },
};
</script>

<style scoped>
.el-card {
  margin-top: 10px;
}
.el-form {
  margin-top: 10px;
}

.grid-content {
  margin-left: 40px;
}

.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
</style>
